<template>
  <div class="app-container">
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top: 30px"
    >
      <el-table-column label="序号" prop="id" align="center" width="130px">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="医生姓名" width="170px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.doctor_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="就诊科室" width="170px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.subject }}</span>
        </template>
      </el-table-column>
      <el-table-column label="挂号日期" width="170px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.appointment_date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="就诊时段" width="170px" align="center">
        <template slot-scope="{row}">
          <span>{{ timeSlotOptions[row.time_slot] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排号" width="145px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.position > 0 ? row.position : queueOptions[row.position] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="挂号费用" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付情况" width="180px" align="center">
        <template slot-scope="{row}">
          <div>
            <el-popconfirm title="您确认要付款该预约吗？" @onConfirm="pay(row.appointment_id)" @confirm="pay(row.appointment_id)">
              <el-button slot="reference" type="danger" :disabled="row.status !== 'pending'" size="mini" icon="el-icon-thumb" style="margin-left: 10px;background-color: transparent;color: red;">
                {{ payOptions[row.status] }}
              </el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { patientReserve, payOnline } from '@/api/reserve'
import waves from '@/directive/waves' // waves directive
import { timeSlotOptions, payOptions, queueOptions } from './mockData'
import { Message } from 'element-ui'

export default {
  name: 'ReservePage',
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      // 主页面查询
      listQuery: {
        doctor_name: undefined,
        timeValue: undefined
      },
      // 限定选择今天及以后的时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      timeSlotOptions,
      payOptions,
      queueOptions
    }
  },
  // 创建页面时，先获取数据，再渲染页面
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = {
        patient_id: localStorage.getItem('user_id')
      }
      // 筛选时也是重新发送请求到后端请求数据
      patientReserve(params).then(response => {
        // 更新列表和总数
        this.list = response
      })
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    getPayStateDescription(status) {
      return this.payOptions[status]
    },
    // 取消预约
    // cancelReserve(id) {
    //   console.log(id)
    //   fetchList(this.listQuery).then(response => {
    //     this.list = response.data.items
    //     Message({
    //       message: '取消预约成功',
    //       type: 'success',
    //       duration: 5 * 1000
    //     })
    //     this.getList()
    //   })
    // },
    // 支付
    pay(id) {
      const params = {
        appointment_id: id
      }
      payOnline(params).then(response => {
        Message({
          message: response.message,
          type: 'success',
          duration: 3 * 1000
        })
        console.log(response)
        this.getList()
      })
    }
  }
}
</script>
